import { defineComponent, ref } from 'vue'
import { v4 } from 'uuid'
import { useClipboard } from '@vueuse/core'
import { useSvgState } from '../hooks/useSvgState'
import { SvgComponent, SvgOutputType } from '../type'
import componentsInit from '../utils/componentsInit'
import renderFormItem from '../utils/renderFormItem'
import convertConfig from '../utils/convert'
import { message } from 'ant-design-vue'

const dropdownMenus = [
  { title: '圆', key: 'circle' },
  { title: '矩形', key: 'rect' },
  { title: '多边形', key: 'polygon' },
  { title: '路径', key: 'path' }
]

const columns = [
  { title: '类型', dataIndex: 'type' },
  { title: '操作', key: 'action', slots: { customRender: 'action' } }
]

export default defineComponent({
  name: 'SvgConfig',
  setup () {
    const {
      svgState,
      setCurrentComponent,
      addComponent,
      deleteComponent,
      saveComponent
    } = useSvgState()
    const { copy } = useClipboard()

    const showStr = ref('')
    const outputModalVisible = ref(false)

    const rowClass = (record: SvgComponent) => {
      const { currentComponent } = svgState
      if (!currentComponent) return ''
      return record.id === currentComponent.id ? 'selected' : ''
    }

    const handleMenuClick = ({ key: type }: { key: string }) => {
      const component = {
        id: v4(),
        type,
        ...componentsInit[type]
      }
      setCurrentComponent(component)
      addComponent(component)
    }

    const handleOutput = (type: SvgOutputType) => {
      const { baseConfig, components } = svgState
      showStr.value = convertConfig({ baseConfig, components }, type)
      outputModalVisible.value = true
    }

    const handleCopy = async () => {
      await copy(showStr.value)
      message.success('已复制到粘贴板')
    }
    return () => {
      const { components, currentComponent } = svgState
      // Dropdown slot
      const overlaySlot = () => {
        const menuItems = dropdownMenus.map(item => (
          <a-menu-item key={ item.key }>
            { item.title }
          </a-menu-item>
        ))
        return (<a-menu onClick={ handleMenuClick }>{ menuItems }</a-menu>)
      }
      // Table Slot
      const actionSlot = ({ record, index }: { record: SvgComponent, index: number }) => (<>
        <a-button shape="circle" type="primary" onClick={() => setCurrentComponent(record)}><i class="far fa-edit"></i></a-button>
        <a-popconfirm title="确定要删除组件?" onConfirm={() => deleteComponent(index)}>
          <a-button class="ml-2" shape="circle" type="danger"><i class="fas fa-trash-alt"></i></a-button>
        </a-popconfirm>
      </>)
      let form: JSX.Element | null = null
      if (currentComponent) {
        form = (
          <a-form class="mt-5" model={ currentComponent }>
            <a-form-item label="填充色">
              <a-input v-model={[ currentComponent.fill, 'value' ]} />
            </a-form-item>
            <a-form-item label="边框宽度">
              <a-input-number v-model={[ currentComponent['stroke-width'], 'value' ]} min={ 0 } />
            </a-form-item>
            <a-form-item label="边框颜色">
              <a-input v-model={[ currentComponent.stroke, 'value' ]} />
            </a-form-item>
            { renderFormItem(currentComponent) }
            <a-form-item>
              <a-button type="primary" onClick={ saveComponent }><i class="far fa-save" />保存</a-button>
            </a-form-item>
          </a-form>
        )
      }
      return (
        <div class="svg-config px-1 pt-1 mr-4">
          <div class="mb-1 flex items-center">
            <a-dropdown-button v-slots={{ overlay: overlaySlot }}>新增图形</a-dropdown-button>
            <div class="ml-5 flex">
              <div>父元素颜色：</div>
              <input class="ml-2" v-model={[ svgState.previewColor ]} type="color" />
            </div>
            <div class="ml-5 flex flex-1 items-center">
              <div>图标名：</div>
              <a-input class="w-32" v-model={[ svgState.baseConfig.name, 'value' ]} />
            </div>
            <div>输出：</div>
            <a-button class="ml-2" onClick={() => { handleOutput('HTML') }}>HTML</a-button>
            <a-button class="ml-2" onClick={() => { handleOutput('SYMBOL') }}>SYMBOL</a-button>
            <a-button class="ml-2" onClick={() => { handleOutput('JSON') }}>JSON</a-button>
          </div>
          <a-table
            row-key="id"
            row-class-name={ rowClass }
            data-source={ components }
            columns={ columns }
            pagination={ false }
            v-slots={{ action: actionSlot }}>
          </a-table>
          { form }
          <a-modal
            v-model={[outputModalVisible.value, 'visible']}
            width="60%"
            okText="复制"
            onOk={ handleCopy } >
            <pre>{ showStr.value }</pre>
          </a-modal>
        </div>
      )
    }
  }
})
